<template>
  <div class="theme-edit">
    <page-header-wrapper />
    <a-card class="file-list-card" :loading="loading">
      <a-select
        show-search
        :value="selectTheme.site_theme_name"
        style="width:270px; margin-right: 20px"
        :default-active-first-option="false"
        :filter-option="false"
        not-found-content="请输入主题名称"
        @search="getThemeListAction"
        @change="handleThemeChange"
      >
        <a-select-option v-for="(item, index) in themeList" :key="index">
          {{ item.site_theme_name }}
        </a-select-option>
      </a-select>
      <tree-file-node :file-list="fileList" @changeFile="changeFile($event)" />
    </a-card>
    <codemirror class="vscode" v-model="content" :options="codemirrorOptions"></codemirror>
    <a-button
      type="primary"
      style="margin-left: 10px; position: relative; top: -10px;"
      @click="saveCode"
    >保存</a-button>
  </div>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'

import { codemirror } from 'vue-codemirror-lite'
import 'codemirror/mode/htmlmixed/htmlmixed.js'
import 'codemirror/theme/material-darker.css'

import TreeFileNode from '@/views/site/components/tree/TreeFileNode'
import { Empty, Pagination } from 'ant-design-vue'
import {
  fileListToTree,
  getFileType
} from '@/views/site/js/themeFileList'

import {
  getThemeFileList,
  getThemeList,
  getThemeFileContent,
  changeThemeFileContent
} from '@/api/theme'

export default {
  name: 'ThemeCodeEdit',
  components: {
    PageHeaderWrapper,
    codemirror,
    Empty,
    Pagination,
    TreeFileNode
  },
  data () {
    return {
      loading: false,
      templateId: '',
      themeList: [],
      selectTheme: [],
      fileList: [],
      selectFilePath: '',
      codemirrorOptions: {
        tabSize: 4,
        mode: 'text/html',
        lineNumbers: true,
        line: true,
        theme: 'material-darker'
      },
      content: ''
    }
  },
  methods: {
    // 获取主题文件列表方法
    getThemeFileListAction (templateId) {
      getThemeFileList({
        'template_id': templateId
      }).then(res => {
        this.fileList = fileListToTree(res.items?.fileList)
      })
    },
    // 获取主题列表方法
    getThemeListAction (value) {
      getThemeList({
        name: value
      }).then(res => {
        this.themeList = res.items
      })
    },
    // 选中主题回调
    handleThemeChange (index) {
      this.selectTheme = this.themeList[index]
      this.getThemeFileListAction(this.selectTheme.site_theme_id)
    },
    // 变更文件事件
    changeFile (data) {
      if (data.filePath === this.selectFilePath) return
      getThemeFileContent({
        template_id: this.selectTheme.site_theme_id,
        filePath: data.filePath
      }).then(res => {
        this.codemirrorOptions = {
          tabSize: 4,
          mode: getFileType(res.items.mime.split(';')[0].trim(), res.items.ext),
          lineNumbers: true,
          line: true,
          theme: 'material-darker'
        }
        this.selectFilePath = data.filePath
        this.content = res.items.content
      })
    },
    // 保存代码
    saveCode () {
      changeThemeFileContent({
        filePath: this.selectFilePath,
        content: this.content
      }).then(res => {
        this.$message.info(res.msg)
      })
    }
  }
}
</script>

<style>
.theme-edit {
  position: relative;
}
.file-list-card {
  margin-top: 10px;
  width: 320px;
  height: 80vh;
  overflow-y: scroll;
  display: inline-block;
}

.file-list-card::-webkit-scrollbar {
  width: 4px;
}
.file-list-card::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.2);
}
.file-list-card::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}

.vscode {
  width: 1120px !important;
  margin-top: 10px !important;
  display: inline-block !important;
  position: absolute;
  left: 330px;
}

.CodeMirror {
  height: 76vh;
}
</style>
